
<template>
    <div class="box box2">
        <!-- <img @click="goBack" class="backimg" :src="backImg" alt=""> -->
        <div @click="goBack" class="back"></div>
        <input type="text" placeholder="闪购" class="input_03" v-model="inputValue" @input="onInput">
        <img :src="bgImg" alt="" class="bg-img1">
        <img :src="img03" alt="" class="img_03">
        <img :src="img032" alt="" @click="goToBox3" class="img_03_1" v-if="showImg">
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import backImg from '@/assets/img/back.png'
import bgImg from '@/assets/img/03.jpg'
import img03 from '@/assets/img/03_1.png'
import img032 from '@/assets/img/03_2.png'


const inputValue = ref('')
const showImg = ref(false)
const router = useRouter()

function goBack() {
    router.back()
}
function onInput() {
    showImg.value = inputValue.value.length > 0
}
function goToBox3() {
    router.push('/box3')
}
</script>

<script>
/* global plus */
export default {
    name: 'BoxTwo',

    data() {
        return {
            inputValue: '',
            showImg: false,
            startX: 0,
            startY: 0
        }
    },
    mounted() {
    document.addEventListener('plusready', this.handleBackButton);
},
    methods: {
        handleBackButton() {
            if (typeof plus !== 'undefined' && plus.key) {
                plus.key.addEventListener('backbutton', () => {
                    if (this.$route.path !== '/box1') {
                        this.$router.push('/box1');
                    } else {
                        if (confirm('再按一次退出应用')) {
                            plus.runtime.quit();
                        }
                    }
                });
            }
        },
        tack() {
            this.showImg = this.inputValue.length > 0
        },
        handleTouchStart(e) {
            this.startX = e.touches[0].clientX
            this.startY = e.touches[0].clientY
        },
        handleTouchEnd(e) {
            const endX = e.changedTouches[0].clientX
            const endY = e.changedTouches[0].clientY
            const deltaX = endX - this.startX
            const deltaY = endY - this.startY
            // 横向滑动距离大于50，且纵向滑动不大于30，判定为左右滑
            if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
                if (deltaX > 0) {
                    // 右滑，上一页
                    this.goPrev()
                } else {
                    // 左滑，下一页
                    this.goNext()
                }
            }
        },
        goPrev() {
            // 切换到上一页
            this.$router.back() // 举例，改成你的上一页路由
        },
        goNext() {
            // 切换到下一页
            this.$router.push('/box3') // 举例，改成你的下一页路由
        }
    },
    beforeUnmount() {
        // 移除监听
        document.removeEventListener('plusready', this.handleBackButton);
    }
}
</script>

<style scoped>
.back {
    position: absolute;
    top: 52.7781px;
    left: 16px;
    width: 30px;
    height: 30px;
    z-index: 999;
    /* background-color: red; */
    /* opacity: 0; */
}

.backimg {
    position: absolute;
    top: 46px;
    left: 15px;
    width: 19px;
    z-index: 99;

}

.bg-img1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 375px;
    height: auto;
    z-index: 1;
}

.box {
    width: 375px;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: absolute;
    overflow: auto;
    position: relative;
    background: #fff;
}

.input_03 {
    position: absolute;
    top: 48px;
    left: 82px;
    width: 180px;
    height: 32px;
    font-size: 15px;
    border: none;



    z-index: 2;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); */
}

.img_03 {
    position: fixed;
    left: 0;
    top: 100px;

    width: 375px;
    z-index: 3;

}

.img_03_1 {
    position: absolute;
    left: 0;
    top: 100px;
    width: 375px;
    z-index: 4;
    cursor: pointer;
}

.page {
    width: 100vw;
    height: 100vh;
    background: #fff;
}
</style>